var that;
export default class {
  constructor(config) {
    that = this;
    // console.log(config);
    this.el = config.el;
    this.data = config.data;
    this.oneMethod = config.fn;
    this.init();
    // 获取需要用的元素
    that.updateEl();
  }
  delFun(val) {
    console.log("删除", val.target.parentNode);
    that.list.removeChild(val.target.parentNode);
    // that.updateEl();
  }
  addFun(e) {
    console.log(that.delBtns);
    // that.oneMethod(e);
    var title = document.getElementsByClassName("title")[0].value;
    var item = ` <li>
    <button class="callback">${title}</button><button class="del">删除</button></br>
    </li>`;
    that.list.insertAdjacentHTML("beforeend", item);
    console.log(that.list);
    that.updateEl();
  }
  updateEl() {
    that.list = document.getElementById("list");
    that.addBtn = document.getElementById("addBtn");
    that.delBtns = that.list.getElementsByClassName("del");
    that.callbackBtns = that.list.getElementsByClassName("callback");
    // 自动找焦点
    document.getElementsByClassName("title")[0].focus();
    // 清空input
    document.getElementsByClassName("title")[0].value = "";
    // 添加点击事件
    that.addBtn.onclick = this.addFun;
    // 删除点击事件
    for (let index = 0; index < that.delBtns.length; index++) {
      that.delBtns[index].onclick = that.delFun;
    }
    // 回调函数
    for (let index = 0; index < that.callbackBtns.length; index++) {
      that.callbackBtns[index].onclick = (e) => {
        // that.oneMethod(e.target.textContent)
        that.oneMethod(e);
        console.log(that.list);
        var res = that.list.indexOf(e.target.parentNode);
        console.log(res);
      };
    }
  }
  init() {
    // 初使的样子
    var containner = document.getElementById(this.el);
    var tag = `<input class="title" type="text">
    <button id="addBtn">添加</button>
    <ul id="list">
    <li>
    <button class="callback">默认按钮</button><button class="del">删除</button></br>
    </li>
    </ul>`;
    containner.innerHTML = tag;
  }
}
